@import "./common/mixin.scss";
@import "./common/utils.scss";
@import "./common/vars.scss";

@include module(dropdown) {
  position: relative;
  display: inline-block;
  cursor: pointer;

  @include modifier(top) {
    transform-origin: bottom;
    .as-dropdown-menu {
      bottom: 22px;
      margin: 5px 0 12px 0;
      &:before {
        display: none;
      }
      &:after {
        content: "";
        position: absolute;
        bottom: -6px;
        left: 40px;
        border-top: solid 6px white;
        border-left: solid 6px transparent;
        border-right: solid 6px transparent;
      }
    }
  }

  @include modifier(small) {
    .as-dropdown-item {
      line-height: 30px;
      height: 30px;
      font-size: $--font-size-small;
    }
  }
  @include modifier(mini) {
    .as-dropdown-item {
      line-height: 28px;
      height: 28px;
      font-size: $--font-size-extra-small;
    }
  }
}

@include module(dropdown-menu) {
  transform-origin: top;
  z-index: 100;
  background: white;
  position: absolute;
  margin: 12px 0 5px 0;
  border-radius: $--border-radius-base;
  padding: 6px 0;
  box-sizing: border-box;
  min-width: 80px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  cursor: auto;
  border: solid 1px mix($--color-white, $--border-color-base, 70%);
  &:before {
    content: "";
    position: absolute;
    top: -6px;
    left: 40px;
    border-bottom: solid 6px white;
    border-left: solid 6px transparent;
    border-right: solid 6px transparent;
  }
}

@include module(dropdown-item) {
  cursor: pointer;
  padding: 0 20px;
  height: 34px;
  background: white;
  color: $--color-text-regular;
  font-size: $--font-size-base;
  line-height: 34px;
  outline: none;
  @include utils-user-select(none);
  @include when(hover) {
    background: mix($--color-white, $--color-primary, 92%);
    color: $--color-primary;
    font-weight: bold;
  }
  @include when(disabled) {
    color: mix(
      $--color-white,
      $--color-text-regular,
      $--color-disabled-percent
    );
    @include when(hover) {
      background: white;
      font-weight: normal;
      cursor: not-allowed;
    }
  }
  @include when(devided) {
    &:not(:first-child) {
      margin-top: 10px;
      position: relative;
      &:before {
        content: "";
        top: -5px;
        left: 0;
        right: 0;
        position: absolute;
        border-top: solid 1px
          mix($--color-white, $--border-color-base, $--color-disabled-percent);
      }
    }
  }
}
